<style scoped>
#consumption {
	padding: 60px 15px 0 15px;
}

.head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #dddddd;
	border-radius: 30px;
}

.h-left,
.h-right {
	width: 50%;
	text-align: center;
	padding: 7px 0;
	font-size: 18px;
	color: #666666;
	border-radius: 30px;
}

.h-right {
	background-color: #dddddd;
}

.active {
	background-color: #45a5e2;
	color: white;
}

.conterBox {
	margin: 20px 0;
	display: flex;
	justify-content: space-between;
}

.c-item {
	width: 30%;
	padding: 15px 0;
	text-align: center;
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 3px 7px 0px #d8d8d8;
}

.c-item div:nth-child(1) {
	color: #45a5e2;
	font-size: 12px;
}

.c-item span {
	color: #e24545;
	font-size: 20px;
}

.c-item1 {
	width: 48%;
}

.table1 {
	overflow-y: scroll;
	max-height: 72vh;
	min-height: auto;
	border-radius: 13px;
	box-shadow: 0 3px 7px 0px #d8d8d8;
}

.table {
	border-collapse: collapse;
	width: 100%;
}

thead,
th {
	background-color: #45a5e2;
	font-weight: bold;
	position: sticky;
	top: 0;
}

th {
	padding: 12px 6px;
	text-align: center;
	color: white;
}

th:nth-child(1) {
	width: 20%;
}

th:nth-child(2),
th:nth-child(4) {
	width: 26%;
}

th:nth-child(3) {
	width: 28%;
}

td {
	text-align: center;
	padding: 10px 6px;
	border-bottom: 1px solid #ebebeb;
}

.null {
	width: 100%;
	font-size: 18px;
	color: #b9b9b9;
	border-radius: 12px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	box-shadow: 0 3px 7px 0px #d8d8d8;
}
</style>
<template>
	<top-bar title="消费明细" :notBack="false" />
	<div id="consumption">
		<div class="head">
			<div class="h-left" :class="{ active: formIndex == 0 }" @click="formIndex = 0">
				消费记录
			</div>
			<div class="h-right" :class="{ active: formIndex == 1 }" @click="formIndex = 1">
				充值记录
			</div>
		</div>
		<div v-if="formIndex == 0">
			<div class="conterBox">
				<div class="c-item">
					<div>
						<span>{{
							Number(tableData1.total_coin_record_num) +
							Number(tableData1.balance_coin) || 0
						}}</span>
						(币)
					</div>
					<div>兑币总数</div>
				</div>
				<div class="c-item">
					<div>
						<span>{{ tableData1.total_coin_record_num || 0 }}</span>
						(币)
					</div>
					<div>消费币</div>
				</div>
				<div class="c-item">
					<div>
						<span>{{ tableData1.balance_coin || 0 }}</span>
						(币)
					</div>
					<div>剩余币</div>
				</div>
			</div>
			<div class="table1" id="table1" @scroll="lower" v-if="tableLength1">
				<table class="table">
					<thead>
						<tr>
							<th>序号</th>
							<th>设备编号</th>
							<th>消费时间</th>
							<th>消耗币</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, i) in tableData1.list" :key="i">
							<td>{{ i + 1 }}</td>
							<td>{{ item.number || 0 }}</td>
							<td>{{ item.create_time || 0 }}</td>
							<td>{{ item.coin || 0 }}</td>
						</tr>
					</tbody>

				</table>
			</div>
			<div class="null" v-else>暂无消费订单记录</div>
		</div>
		<div v-if="formIndex == 1">
			<div class="conterBox">
				<div class="c-item c-item1">
					<div>
						<span>{{ tableData2.total_money || 0 }}</span>
						(元)
					</div>
					<div>累计充值</div>
				</div>
				<div class="c-item c-item1">
					<div>
						<span>{{ tableData2.order_num || 0 }}</span>
						(笔)
					</div>
					<div>订单数量</div>
				</div>
			</div>
			<div class="table1" id="table2" @scroll="lower2" v-if="tableLength2">
				<table class="table">
					<thead>
						<tr>
							<th>序号</th>
							<th>充值</th>
							<th>充值时间</th>
							<th>游戏币</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, i) in tableData2.list" :key="i">
							<td>{{ i + 1 }}</td>
							<td>{{ item.number || 0 }}</td>
							<td>{{ item.create_time || 0 }}</td>
							<td>{{ item.coin || 0 }}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="null" v-else>暂无充值订单记录</div>
		</div>
	</div>
</template>
<script setup>
// 导入自定义组件
import topBar from "@/components/topBar.vue"; //顶部导航栏
// 图片
</script>
<script>
export default {
	data() {
		return {
			userData: {}, //用户信息
			formIndex: 0,
			page: 1, //初始页面
			page2: 1,
			tableData1: [],
			tableLength1: false,
			tableData2: [],
			tableLength2: false,
		};
	},
	created() {
		vant.showLoadingToast({
			message: '加载中...',
			forbidClick: true,
		})
	},
	mounted() {
		this.userData = JSON.parse(sessionStorage.userData);
		this.getXiaofei();
	},
	methods: {
		getXiaofei() {
			axios
				.post(
					"/index.php/index/Index/coinRecord",
					new URLSearchParams({
						"Accept-Debug": 1,
						number: 'hxtFH1691654330',
						store_id: this.userData.storeid,
						page: this.page,
					})
				)
				.then(({ data }) => {
					if (data.code == 0) {
						this.tableData1 = data.data;
						if (data.data.list.length) {
							this.tableLength1 = true;
							var page = this.page;
							this.page = ++page;
							for (let i = 0; i < data.data.list.length; i++) {
								this.tableData1.list.push(data.data.list[i]);
							}
						}
					}
				});
		},
		lower(e) {
			let scrollTop = e.target.scrollTop;
			let scrollHeight = e.target.scrollHeight;
			let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height);
			let currentHeight = scrollTop + offsetHeight;
			if (currentHeight >= scrollHeight) {
				this.getXiaofei();
			}
		},
		getChongzhi() {
			axios
				.post(
					"/index.php/index/Index/saoBeiOrder",
					new URLSearchParams({
						"Accept-Debug": 1,
						number: 'hxtFH1691654330',
						store_id: this.userData.storeid,
						page: this.page2,
					})
				)
				.then(({ data }) => {
					if (data.code == 0) {
						this.tableData2 = data.data;
						if (data.data.list.length) {
							this.tableLength2 = true;
							var page = this.page2;
							this.page2 = ++page;
							for (let i = 0; i < data.data.list.length; i++) {
								this.tableData2.list.push(data.data.list[i]);
							}
						}
					}
				});
		},
		lower2(e) {
			let scrollTop = e.target.scrollTop;
			let scrollHeight = e.target.scrollHeight;
			let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height);
			let currentHeight = scrollTop + offsetHeight;
			if (currentHeight >= scrollHeight) {
				this.getChongzhi();
			}
		},
	},
};
</script>
